<template>
  <div id="hotMusic">
    <div class="rightBox01">
      <div class="btn_group01">
        <button>热门音乐</button>
      </div>
      <div class="rightBox-content">
        <section class="btn_input">
          <radio_group01 :radio_values="['24小时', '近3天', '近7天', '近30天', '近90天']" v-model="value09" />
          <div class="searchBox" style="margin-top: 0px;">
            <el-input v-model="input01" placeholder=" 请输入关键词在排行榜中搜索" @keyup.enter.native="toSearch"></el-input>
            <div class="imgBox" @click="toSearch">
              <!-- <img src="@/assets/wang/talentCompare/search.png" /> -->
            </div>
          </div>
          <div class="btn_group">
            <button @click="generatorImage">
              <span></span>分享
            </button>
            <button @click="export_data">
              <span></span>导出
            </button>
          </div>
        </section>
        <!-- <div class="searchBox" style="margin-top:0">
          <el-input
            v-model="input01"
            placeholder=" 请输入关键词在排行榜中搜索"
            @keyup.enter.native="toSearch"
          ></el-input>
          <div class="imgBox" @click="toSearch">
            <img src="@/assets/wang/talentCompare/search.png" />
          </div>
        </div>-->
        <ul
          class="fixedThead"
          ref="fixedThead"
          :class="{ isShow: isFixed }"
          :style="showLeft == true ? 'left:222px' : 'left:98px'"
        >
          <li>音乐</li>
          <li>创作者</li>
          <li tc>总使用人数</li>
          <li tc>热门视频TOP3</li>
          <li tc>操作</li>
        </ul>
        <table class="table" ref="capture">
          <thead>
            <tr>
              <th>音乐</th>
              <th>创作者</th>
              <th>总使用人数</th>
              <th>热门视频TOP3</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody v-show="musicList.length != 0">
            <tr v-for="(item, index) in musicList" :key="'music' + index" :id="!index ? 'tr1' : ''">
              <td>
                <div class="topic" @click="seeDetails(item.music_id, item)">
                  <div class="mlogoBox">
                    <img :src="item.thum_pic" />
                    <img src="@/assets/wang/video/musicBg.png" />
                  </div>
                  <div class="musicTitle">
                    <p>
                      <span>{{ item.title }}</span>
                    </p>
                    <p>
                      音乐时长:
                      <span>{{ format_time(item.duration * 1000) }}</span>
                    </p>
                  </div>
                </div>
              </td>
              <td>
                <img
                  :src="item.thum_pic"
                  alt
                  @click="go_to_page01(item.author_id)"
                  @error="defaultImgFn(superman,$event)"
                />
                <p @click="go_to_page01(item.author_id)">{{ item.author_name }}</p>
              </td>
              <td>{{ format_num(item.user_count) }}</td>
              <td>
                <div class="topVideo">
                  <div
                    class="videoImgBox"
                    v-for="(item1, index1) in item.awemeList.slice(0, 3)"
                    :key="'v' + index1"
                  >
                    <!-- <img
                      src="@/assets/wang/video/like.png"
                      class="likeImg"
                      v-if="item1.isCollect == 0"
                      @click="addVideoStar(item1.awemeId, item1)"
                    />-->
                    <img
                      src="@/assets/wang/video/liked.png"
                      class="likeImg"
                      v-if="item1.isCollect == 1"
                      @click="cancelVideoStar(item1.awemeId, item1)"
                    />
                    <img
                      src="@/assets/wang/video/play1.png"
                      class="playImg"
                      @click="playVideo(item1.url)"
                    />
                    <img
                      :src="item1.thumPic"
                      class="videoImg"
                      style="border-radius: 6px;"
                      @error="defaultImgFn(video,$event)"
                    />
                    <div class="zanBox">
                      <img src="@/assets/wang/video/zan.png" />
                      <span>{{ format_num(item1.favoriteCount) }}</span>
                    </div>
                    <!-- <div class="userInfoMaskWl"></div> -->
                  </div>
                </div>
              </td>
              <td>
                <button @click="seeDetails(item.music_id, item)">查看详情</button>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="upgradeBox" v-if="permissions==0">
          <RankUpgrade class="rankUpgrade" />
        </div>
        <p
          class="nothing"
          v-show="
            musicList.length < 30 &&
              !loading &&
              permissions &&
              musicList.length != 0
          "
        >我是有底线的～</p>
        <div class="pageBox" v-if="!loading && needing">
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="count"
            :page-size="30"
            :current-page="page"
            @current-change="GetmusicList"
            :hide-on-single-page="true"
          ></el-pagination>
        </div>
        <div
          v-loading="loading"
          v-if="loading"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>

        <div class="empty" v-show="!needing && !loading">
          <img src="@/assets/liu/zw.png" />
          <p>暂无数据</p>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog :visible.sync="musicDetails" :show-close="false" v-if="musicDetails">
      <div class="topicDetailsBox">
        <musicDetails
          :musicId="musicId"
          @changeMusicCollect="changeMusicCollect"
          @changeVideoCollect="changeVideoCollect"
        />
      </div>
      <img src="@/assets/wang/video/close.png" class="closeImg" @click="musicDetails = false" />
    </el-dialog>
  </div>
</template>

<script>
export { default } from './hotMusic.js';
</script>
<style lang="less" scoped>
@import './hotMusic.less';
</style>
